<template>
<div class="black">
  <ul>
    <li>
      <el-icon><Memo /></el-icon>
      <span>新闻中心</span>
    </li>
    <li>
      <el-icon><Coordinate /></el-icon>
      <span>投资方</span>
    </li>
    <li>
      <el-icon><User /></el-icon>
      <span>关于我们</span>
    </li>
    <li>
      <el-icon><Message /></el-icon>
      <span>联系我们</span>
    </li>
  </ul>
  <hr>
  <div class="copyright">版权信息</div>
</div>
</template>
<script setup lang="ts">

import { Memo, Coordinate, User, Message } from '@element-plus/icons-vue'

</script>
<style scoped>

.black {
  background-color: rgb(26, 26, 26);
  color: aliceblue;
}

ul {
  width: 80%;
  margin: 0 auto;
  list-style: none;
  display: flex;
  align-items: center;


  li {
    line-height: 40px;
    padding: 30px;

    .el-icon {}
    span {
      padding: 10px;
    }
  }
}

hr {
  width: 80%;
  margin: 0 auto;
  opacity: 0.2;
}

.copyright {
  text-align: center;
  padding: 20px;
  font-size: 12px;
  opacity: 0.5;
}

</style>
